<%--
  Created by IntelliJ IDEA.
  User: kuku-wine
  Date: 2022/3/11
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>demo</title>
    <style>
        table{
            border: 1px salmon solid;
        }
    </style>
    <script src="../../js/Axios.js"></script>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
<%--        <p>id={{msg.id}}</p>--%>
<%--        <p>name={{msg.name}}</p>--%>
<%--        <p>classname={{msg.classname}}</p>--%>
<%--&lt;%&ndash;        <p>{{msg.id}}</p>&ndash;%&gt;--%>
<%--&lt;%&ndash;        <p>{{msg.name}}</p>&ndash;%&gt;--%>
<%--&lt;%&ndash;        <p>{{msg.classname}}</p>&ndash;%&gt;--%>
<%--        <button type="button" @click="getMSG()">get</button>--%>
<%--        <button type="button" @click="getMSG2()">post</button>--%>
<%--        <br>--%>
        <form action="">
            id:<input type="text" v-model="msg.id"/>
            name:<input type="text" v-model="msg.name"/>
            classname:<input type="text" v-model="msg.classname"/>
            <button type="button" @Click="getUser()">点击提交数据</button>
        </form>


    </div>

    <script>
        var app=new Vue({
            //选中#app div  挂载
            el:"#app",
            data:{
                msg:{
                    id:"",
                    name:"",
                    classname:""
                }
            },
            methods:{
                getMSG(){
                    var that=this;
                    // axios.get("/getAxiosInfo")
                    //     .then(function (response) {
                    //         console.log(response.data);
                    //         that.msg=response.data;
                    //     }).catch(function () {
                    //
                    // })
                    axios.get("findUserById?id=1")
                        .then(function (res) {
                            var user=res.data.data;
                            console.log(res.user);
                            console.log("获取到的数据是"+JSON.stringify(user))
                            // that.msg.id=res.user.id;
                            // that.msg.name=res.user.name;
                            // that.msg.classname=res.user.classname;
                            that.msg=user;
                        })
                        .catch(function () {
                            
                        })
                },
                getMSG2() {
                    //用post时注意数据格式不同
                    var that=this;
                    axios.post("findUserById2",{
                        id:2
                    })
                        .then(function (res) {
                            var user=res.data.data;
                            console.log(res.data);
                            console.log("获取到的数据是"+JSON.stringify(user))
                            // that.msg.id=res.user.id;
                            // that.msg.name=res.user.name;
                            // that.msg.classname=res.user.classname;
                            that.msg=user;
                        })
                        .catch(function () {

                        })
                },
                getUser(){
                    var that=this;
                    axios.post("findUserById2",{
                        user:that.msg,
                    })
                        .then(function (res) {
                            var user=res.data.data;
                            console.log(res.data);
                            console.log("获取到的数据是"+JSON.stringify(user))
                            that.msg=user;
                        })
                        .catch(function () {

                        })
                }
            }
        })
    </script>
<%--    <table>--%>
<%--        <thead>--%>
<%--            <th>id</th>--%>
<%--            <th>name</th>--%>
<%--            <th>classname</th>--%>

<%--        </thead>--%>
<%--        <tbody>--%>
<%--            <c:forEach var="l" items="${users}">--%>
<%--                <tr>--%>
<%--                    <td>${l.id}</td>--%>
<%--                    <td>${l.name}</td>--%>
<%--                    <td>${l.classname}</td>--%>

<%--                </tr>--%>
<%--            </c:forEach>--%>
<%--        </tbody>--%>
<%--    </table>--%>
</body>
</html>
